<template>
  <div>
    <el-popover placement="bottom" class="body" trigger="hover" popper-class="circle">
      <div class="city-box">
        <!-- 选择城市首字母 -->
        <div class="city-key">
          <el-link class="key-item" v-for="(arr,key,index) in this.citys" :key="index" @click="cityKey=key" type="primary">{{key}}</el-link>
        </div>
        <!-- 首字母下属城市 -->
        <div class="city-name">
          <dl :key="index" v-for="(key,index) of cityKey">
            <!-- 城市首字母 -->
            <dt>{{key}}</dt>
            <div class="city-dd">
              <dd :key="index" v-for="(name,index) in citys[cityKey][key]" class="city-a">
                <el-link @click="cityInput=name;showBox=false">{{name}}</el-link>
              </dd>
            </div>
          </dl>
        </div>
      </div>
      <el-input v-model="cityInput" placeholder="选择城市" slot="reference"></el-input>
    </el-popover>
    <div class="overlay"></div>
  </div>
</template>

<script>
export default {
  name: "CityPicker",
  data() {
    return {
      cityInput: "",
      rawList:[],
      citys: {
        ABCDE: {
          A: ["南极"],
          B: ["北京"],
          C: ["成都"],
          D: ["叮当猫"],
          E: ["洱海"]
        },
        FGHJ: { F: [], G: [], H: [], J: [] },
        KLMNP: { K: [], L: [], M: [], N: [], P: [] },
        QRSTW: { Q: [], R: [], S: [], T: [], W: [] },
        XYZ: { X: [], Z: [], Y: [] }
      },
      cityKey: "ABCDE",
      showBox: false
    };
  },
  methods: {
    onClickInput() {
      console.log("input + " + this.cityInput);
      this.showBox = !this.showBox;
    }
  },
  watch: {
    cityInput(val,oldVal) {
      this.$emit("city-change", val);
    }
  },
  created(){

  }
};
</script>

<style scpoed>
.siteInput {
  height: 40px;
}
.city-key {
  display: flex;
}
.key-item {
  margin: 5px;
}
.city-name {
  display: flex;
  flex-direction: column;
}
.city-name dl {
  display: flex;
  margin: 5px;
  align-items: top;
}
.city-name dl dt {
  width: 10px;
  line-height: 30px;
  color: #b11505;
  font-weight: bolder;
}
.city-dd {
  width: 240px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.city-a {
  margin: 2px 4px;
}
</style>
